<template>
  <view class="container">
    <view class="m-b-30 p-l-30 p-r-30">
      <u-tabs
        :list="categoryList"
        keyName="category_name"
        lineWidth="0"
        @click="tabClick"
        :activeStyle="{
          color: '#fff',
          background: '#00D075',
          padding: '6rpx 34rpx',
          borderRadius: '50rpx',
          fontSize: '24rpx',
        }"
        :inactiveStyle="{
          color: '#788096',
          background: '#F7F7F7',
          padding: '6rpx 34rpx',
          borderRadius: '50rpx',
          fontSize: '24rpx',
        }"
        itemStyle="padding-left: 0; "
      >
      </u-tabs>
    </view>
    <view
      class="newitem flex-center"
      v-for="(item, index) in list"
      :key="index"
      @click="goDetail(item)"
    >
      <view class="newleft">
        <view class="n-tit">{{ item.title }}</view>
        <view class="n-time">{{ item.create_time_text }}</view>
      </view>
      <image
        :src="$util.img(item.image)"
        class="newimg"
        mode="widthFix"
        lazy-load
      ></image>
    </view>
    <emptyData
      :width="empty.width"
      :height="empty.height"
      :text="empty.text"
      :icon="empty.icon"
      :marginTop="empty.marginTop"
      v-if="list.length == 0"
    ></emptyData>
  </view>
</template>

<script>
export default {
  data() {
    return {
      empty: {
        width: 135,
        height: 134,
        text: "暂无数据",
        icon: "/image/emptyAddress.png",
        marginTop: 100,
      },
      categoryList: [],
      category_id: 0,
      list: [],
      page: 1,
    };
  },
  onLoad() {
    this.getCategoryList();
    this.getList();
  },
  onShow() {},
  methods: {
    tabClick(e) {
      let index = e.index;
      this.category_id = index == 0 ? 0 : this.categoryList[index].category_id;
      this.page = 1;
      this.getList();
    },
    goDetail(item) {
      this.$util.redirectTo(
        "/otherpages/community/zxinfo?id=" + item.article_id
      );
    },
    getCategoryList() {
      this.$api.sendRequest({
        url: "/api/community/category",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.categoryList = res.data;
            this.categoryList.unshift({
              category_name: "全部",
              category_id: 0,
            });
          }
        },
      });
    },
    getList() {
      this.$api.sendRequest({
        url: "/api/community/article",
        data: {
          page: this.page,
          page_size: 20,
          category_id: this.category_id,
          recommend: 0,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.page == 1) this.list = [];
            this.list = [...this.list, ...res.data.list];
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  min-height: 100vh;
  background-color: #fff;
}
.newitem {
  padding: 0 24rpx;
  margin-bottom: 70rpx;
  .newleft {
    flex: 2;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .n-tit {
      width: 480rpx;
      text-overflow: -o-ellipsis-lastline;
      /* //溢出内容隐藏 */
      overflow: hidden;
      /* //文本溢出部分用省略号表示 */
      text-overflow: ellipsis;
      /* //特别显示模式 */
      display: -webkit-box;
      /* //行数 */
      -webkit-line-clamp: 2;
      line-clamp: 2;
      /* //盒子中内容竖直排列 */
      -webkit-box-orient: vertical;
    }
    .n-time {
      font-size: 24rpx;
      color: #bbbec9;
    }
  }
  .newimg {
    width: 206rpx;
    height: 206rpx;
    margin-left: 20rpx;
  }
}
</style>
